import { dom } from '@knno/dom';
import { button } from '@knno/ui/button';
import { Tag, tag } from '@knno/ui/tag';
import { bar } from './index.css';
import Person from '@material-design-icons/svg/filled/person.svg';

export function renderTag() {
	let lb: Tag;
	return [
		dom.h2().text('标签'),
		dom.div(bar).append(
			tag()
				.options(['备选项', '另一个备选', 'option1', { value: 1, text: 'option2' }])
				.placeholder('请输入...')
				.max(3)
				.prefixIcon(Person)
				.ref((l) => (lb = l)),

			button()
				.text('赋值')
				.on('click', () => {
					lb.value(['value1', 'value2', { value: 'v3', text: '取值3' }]);
				}),
			button()
				.text('切换只读')
				.on('click', () => {
					lb.readonly(!lb.readonly());
				}),
			button()
				.text('切换禁用')
				.on('click', () => {
					lb.disabled(!lb.disabled());
				}),
			button()
				.text('切换只能选则')
				.on('click', () => {
					lb.selectOnly(!lb.selectOnly());
				})
		),
	];
}
